<template>
	<div>
		<van-row style="height: 3vh;margin-top: 3vh;">
			<van-col style="margin-left: 0.625rem;line-height: 0.625rem;font-weight: 600;font-size: 15px;">
				商品推荐
			</van-col>
		</van-row>
		<van-row style="margin-top: 1vh;">
			<van-col style="display: flex;flex-wrap: wrap;">
				<van-row style="width: 48vw;margin-left: 1%; height: 37vh;border-radius: 10px;"
					v-for="(item,index) in lists" :key="index">
					<van-col span="24" >
						<van-row style="height: 23vh;">
							<van-image :src="url+item.original_img" :lazy-load="true" width="70%" height="100%">
							</van-image>
						</van-row>
						<van-row
							style="height: 4vh;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: 600;"
							class="ccc" @click="detailenter(item.goods_id)">
							{{item.goods_name}}
						</van-row>
						<van-row style="height: 6vh;color: #ccc;font-size: 14px; display: -webkit-box;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 2;
　　overflow: hidden;line-height: 3vh;" >
							{{item.goods_name}}
						</van-row>
						<van-row class="aaa" style="height: 3vh;text-align: left;color: red;font-weight: 600;">
							￥{{item.market_price}}
						</van-row>
					</van-col>
				</van-row>

			</van-col>
		</van-row>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				url: 'https://img.9lele.com',
				lists: []
			};
		},
		computed: {
			...mapGetters([
				'gives'
			])
		},
		created() {
			this.$store.dispatch("vuexGive", "你好")
				.then(e => {
					console.log(e)
					this.lists = e.data.data
				})
		},
		methods:{
			detailenter(id){
				this.$router.push({path:'/tests?id='+id})
			}
		}
	}
</script>

<style>
	.aaa:first-letter{
		font-size: 10px
	}
</style>
